<template>
  <div class="h-panel">
    <div class="h-panel-bar">
      <span class="h-panel-title">编辑用户信息</span>
      <span class="h-panel-right">
        <router-link to="/users/user">返回</router-link>
      </span>
    </div>
    <div class="h-panel-body">
      <Form
        ref="form"
        :validOnChange="true"
        :showErrorTip="false"
        labelPosition="left"
        :labelWidth="110"
        :rules="validationRules"
        :model="user"
      >
        <Row>
          <Cell width="12" style="padding-right: 10px;">
            <Cell>
              <FormItem label="用户名" prop="name">
                <template v-slot:label>
                  <i class="h-icon-user"></i> 用户名
                </template>
                <input type="text" v-model="user.name" />
              </FormItem>
            </Cell>
            <Cell>
              <FormItem label="登录名" prop="loginName">
                <template v-slot:label>
                  <i class="h-icon-user"></i> 登录名
                </template>
                <input type="text" v-model="user.loginName" />
              </FormItem>
            </Cell>
            <Cell>
              <FormItem label="手机号码" prop="mobilePhone">
                <template v-slot:label>
                  <i class="h-icon-user"></i> 手机号码
                </template>
                <input type="text" v-model="user.mobilePhone" />
              </FormItem>
            </Cell>
            <Cell>
              <FormItem label="电子邮件" prop="email">
                <template v-slot:label>
                  <i class="h-icon-user"></i> 电子邮件
                </template>
                <input type="text" v-model="user.email" />
              </FormItem>
            </Cell>
          </Cell>
          <Cell width="12">
            <Transfer v-model="selectedRoles" :datas="roles" keyName="id">
              <template slot-scope="{option}" slot="item">{{option.name}}</template>
            </Transfer>
          </Cell>
        </Row>
        <FormItem class="text-right">
          <Button color="primary" @click="submit">提交</Button>&nbsp;&nbsp;&nbsp;
          <Button @click="reset">重置</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      user: {
        name: null,
        loginName: null,
        mobilePhone: null,
        email: null,
        // 已经选中的角色
        roles: []
      },
      // 未选中的角色
      roles: [],
      selectedRoles: [],
      validationRules: {
        required: ["name", "loginName", "mobilePhone", "email"],
        email: ["email"],
        mobile: ["mobilePhone"]
      }
    };
  },
  methods: {
    loadRoles() {
      axios.get("/api/user-center/role").then(response => {
        // 要把fixed为true的过滤掉，因为fixed为true是在服务端自动加上！
        let roles = response.data;
        roles = roles.filter(role => !role.fixed);
        this.roles = roles;
      });
    },
    reset() {
      this.user = {
        name: null,
        loginName: null,
        mobilePhone: null,
        email: null,
        // 已经选中的角色
        roles: []
      };
      this.selectedRoles = [];
    },
    submit() {
      this.user.roles = [];
      this.selectedRoles.forEach(id => {
        this.user.roles.push({ id: id });
      });
      axios.post("/api/user-center/user", this.user).then(response => {
        let result = response.data;
        if (result.code === 1) {
          // 保存用户信息以后，回到列表页面   
          if(this.user.id){
              this.$router.push("/users/user");
          }
          this.reset();
        }
        let type = result.code === 1 ? "success" : "error";
        this.$Message({ type: type, text: result.message });
      });
    }
  },
  mounted() {
    this.loadRoles();
    // 获取用户信息
    //获取路径参数$route.params
    let id = this.$route.params.id;
    console.log(id);
    // 根据id查询用户信息
    axios.get("/api/user-center/user/"+ id).then(response => {
      // 拿到用户信息
      let user = response.data;
      // 把拿到的用户信息，放到user中
      this.user = user;
      this.selectedRoles = [];//选中的user
      // 遍历选中的角色
      // this.user.roles.forEach(role=>{
      //   // 如果不是固定的就遍历到role中，因为固定的后台自动那啥，然后不需要那啥
      //   if(!role.fixed){
      //   this.selectedRoles.push(role.id);
      //   }

      // this.user.roles
      // //filter会把不固定的过滤掉
      // .filter(role => !role.fixed)
      // .forEach(role=>this.selectedRoles.push(role.id));
      this.selectedRoles = this.user.roles
        .filter(role => !role.fixed)
        // 把role对象转换为自己需要的类型的对象
        .map(role => role.id);
    })
  }
};
</script>